<template>
	<manage-table
		:service="service"
		:default-record="defaultRecord"
		:options="options"
		ref="manageTable"
	>
		<template #gender="{row}">
			<el-select
				v-show="row.editable"
				v-model="row.gender"
				placeholder="请选择"
				clearable
			>
				<el-option
					v-for="item in genderOptions"
					:key="item.label"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<span v-show="!row.editable">
				{{ genderOptions.find(o => o.value === row.gender).label }}
			</span>
		</template>
	</manage-table>
</template>

<script>
	import { defaultAvatar } from '@/settings';
	import ManageTable from '@/components/ManageTable/ManageTable.vue';
	import ManageTableRouter from '@/components/ManageTable/ManageTableRouter';
	import { sampleService } from '@/services/authorization/Sample';
	import { DateUtil } from '@/utils/DateUtil';

	export default {
		name: 'SampleTable',
		components: {
			ManageTable
		},
		mixins: [ManageTableRouter],
		data() {
			return {
				service: sampleService,
				defaultRecord: {
					id: null,
					username: null,
					gender: false,
					nickname: null,
					avatar: defaultAvatar,
					status: 0,
					createTime: null
				},
				options: [
					{
						label: '用户名',
						value: 'username',
						format: name => '用户:' + name
					},
					{
						label: '性别',
						value: 'gender'
					},
					{
						label: '头像',
						value: 'avatar',
						editable: false
					},
					{
						label: '状态',
						value: 'status',
						type: 'category',
						options: [
							{
								label: '无法使用',
								value: 0
							},
							{
								label: '正常',
								value: 1
							}
						]
					},
					{
						label: '创建时间',
						value: 'createTime',
						type: 'time',
						format: time => DateUtil.format(time, 'yyyy-MM-dd HH:mm')
					}
				],
				genderOptions: [
					{
						label: '男',
						value: false
					},
					{
						label: '女',
						value: true
					}
				]
			};
		}
	};
</script>
